<template>
  <view class="audio-item" @click="$emit('detail', item)">
    <view class="image-wrapper">
      <image :src="item.coverImg" mode="aspectFill" />
    </view>
    <view class="audio-item-info">
      <view class="audio-item-title">{{ item.title }}/{{ item.author }}</view>
      <view class="audio-item-star">
        <u-icon
          name="star-fill"
          size="12"
          v-for="i in item.star"
          :key="i"
          color="#ffd700"
        />
      </view>
      <view class="audio-item-desc">{{ item.description }}</view>
      <view class="audio-item-view">
        <u-icon name="play-right-fill" size="12" />
        <text>{{ formatViewCount(item.viewCount) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { formatViewCount } from "../utils/format.js";

export default {
  name: "AudioListItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    formatViewCount,
  },
};
</script>

<style scoped lang="scss">
.audio-item {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1px solid #f0f0f0;
  .image-wrapper {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }

  .audio-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200rpx;
    overflow: hidden;

    .audio-item-title {
      font-size: 30rpx;
      color: #333;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
      max-height: 2.8em;
    }

    .audio-item-star {
      display: flex;
      align-items: center;
      gap: 10rpx;
    }

    .audio-item-desc {
      display: inline-block;
      font-size: 24rpx;
      color: #999;
      line-height: 1.4;
      margin: 8rpx 0;
      width: fit-content;
      max-width: 300rpx;
      background-color: #f5f5f5;
      padding: 8rpx 10rpx;
      border-radius: 10rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .audio-item-view {
      font-size: 24rpx;
      color: #999;
      display: flex;
      align-items: center;
      gap: 10rpx;
    }
  }
}
</style> 